<template>
	<view class="couponsPage">
		<view class="topBg">
			<image class="topImg" :src="bgImg"></image>
		</view>
		<view class="rewardBox" :style="{ backgroundImage: 'url(' + reward_imgURL + ')' }">
			<view class="integralCouponList">
				<view class="integralCouponItem" :style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<view>100分</view>
					<view>积分</view>
				</view>
				<view class="integralCouponItem" :style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<view>￥120</view>
					<view>奖励金额</view>
				</view>
				<view class="integralCouponItem" :style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<view>5张</view>
					<view>权益卡</view>
				</view>
			</view>
			<view class="cashCouponList">
				<view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
					<view>现金券</view>
					<view>￥10</view>
					<view>满200可用</view>
				</view>
				<view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
					<view>现金券</view>
					<view>￥10</view>
					<view>满200可用</view>
				</view>
				<view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
					<view>现金券</view>
					<view>￥10</view>
					<view>满200可用</view>
				</view>
				<view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
					<view>现金券</view>
					<view>￥10</view>
					<view>满200可用</view>
				</view>
				<view class="cashCouponItem" :style="{ backgroundImage: 'url(' + redBg + ')' }">
					<view>现金券</view>
					<view>￥10</view>
					<view>满200可用</view>
				</view>
			</view>
		</view>
		<view class="activityDes">
			<view class="activityTitle">活动说明</view>
			<view class="activityLine"></view>
			<view class="activityContent">
				<view>
					<view>
						<u-icon name="calendar" color="#606266" size="40"></u-icon>
					</view>
					<view>活动期限</view>
					<view class="head-list__right">
						<text>{{ activityDetail.startTime }}</text>
						<text v-if="activityDetail.alwaysValidStatus == 1">~{{ activityDetail.endTime }}</text>
						<text v-if="activityDetail.alwaysValidStatus == 2">~长期有效</text>
					</view>
				</view>
				<view>
					<view>
						<u-icon name="clock" color="#606266" size="36"></u-icon>
					</view>
					<view>活动时段</view>
					<view class="head-list__right" v-if="activityDetail.limitTimeStatus == 1">全天</view>
					<view class="head-list__right" v-if="activityDetail.limitTimeStatus == 2">
						{{ activityDetail.limitTime }}
					</view>
				</view>
				<view>
					<view>
						<u-icon name="account" color="#606266" size="40"></u-icon>
					</view>
					<view>适用用户</view>
					<view class="head-list__right" v-if="activityDetail.applyUserStatus == 1">所有用户</view>
					<view class="head-list__right" v-if="activityDetail.applyUserStatus == 2">所有个人用户</view>
					<view class="head-list__right" v-if="activityDetail.applyUserStatus == 3">指定个人用户</view>
					<view class="head-list__right" v-if="activityDetail.applyUserStatus == 4">所有车队用户</view>
					<view class="head-list__right" v-if="activityDetail.applyUserStatus == 5">指定车队用户</view>
				</view>
				<view>
					<view>
						<u-icon name="map" color="#606266" size="40"></u-icon>
					</view>
					<view>适用站点</view>
					<view class="head-list__right">{{activityDetail.applyStationStatus == 1?'所有站点':activityDetail.applyStationStatus == 2?'指定站点':'指定条件'}}</view>
				</view>
			</view>
		</view>
		<view class="bottom_button" :style="{backgroundColor:defaultColor}" @click="toRecharge">去充值</view>
		<view style="height:15rpx"></view>
	</view>
</template>

<script>
	import {
		firstChargeDetail
	} from '@/api/marketing/rechargeApi'
	const app = getApp();
	export default {
		data() {
			return {
				defaultColor: uni.getStorageSync('defaultColor_Green'),
				bgImg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/banner.png`,
				reward_imgURL: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/bg.png`,
				integralBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/integral-bg.png`,
				redBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/Red-bg.png`,
				HD: '',
				activityDetail: ""
			};
		},
		onLoad(options) {
			this.setData({
				HD: options.HD
			})
		},
		onShow() {
			this.getFirstChargeDetail()
		},
		methods: {
			//首充有礼活动详情
			getFirstChargeDetail() {
				firstChargeDetail({
					id: this.HD,
					plUserId: uni.getStorageSync('memberId')
				}).then(res => {
					if (res.code == 200) {
						this.activityDetail = res.data.activityDetail
					}
				})
			},
			//去充值
			toRecharge() {
				uni.navigateTo({
					url: '/mine/pages/recharge/recharge'
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.couponsPage {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f7fa;
	}

	.bottom_button {
		width: 80%;
		margin: 0 auto;
		height: 100rpx;
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		border-radius: 80rpx;
		color: #fff;
		text-align: center;
		line-height: 88rpx;
	}

	.topBg {
		width: 100%;
		height: 420rpx;

		.topImg {
			width: 100%;
			height: 100%;
		}
	}

	.rewardBox {
		width: 94%;
		min-height: 800rpx;
		margin: 16rpx auto;
		background-size: 106% 100%;
		background-repeat: no-repeat;
		background-position: center;
	}

	.integralCouponList {
		width: 100%;
		padding: 100rpx 40rpx 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.integralCouponItem {
		width: 200rpx;
		height: 190rpx;
		color: #fc724c;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;

		>view:nth-of-type(2) {
			color: #a14b20;
			margin-top: 40rpx;
			font-size: 22rpx;
		}
	}

	.cashCouponList {
		width: 90%;
		height: 400rpx;
		margin: 24rpx auto;
		background: #fdf1e5;
		border-radius: 10rpx;
		opacity: 0.6;
		padding: 30rpx 40rpx 0 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.cashCouponItem {
		width: 137rpx;
		height: 142rpx;
		margin: 0 24rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		>view:nth-of-type(1) {
			color: #a26d35;
			font-size: 20rpx;
		}

		>view:nth-of-type(2) {
			color: #f0703e;
			font-size: 22rpx;
			font-weight: 600;
		}

		>view:nth-of-type(3) {
			color: #fad9b1;
			font-size: 22rpx;
		}
	}

	.activityDes {
		width: 94%;
		min-height: 385rpx;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.activityTitle {
		width: 100%;
	}

	.activityLine {
		width: 100%;
		height: 1rpx;
		margin: 30rpx 0;
		background-color: #dcdfe6;
	}

	.activityContent {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		>view {
			width: 100%;
			line-height: 60rpx;
			font-size: 28rpx;
			color: #606266;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			>view:nth-of-type(1) {
				width: 60rpx;
			}

			>view:nth-of-type(2) {
				width: 150rpx;
			}

			>view:nth-of-type(3) {
				margin-left: 20rpx;
				color: #303133;
			}
		}
	}
</style>